<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气案例_深度监视_简写</title>
</head>
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            当监视的属性配置项中不需要immediate和deep，只需要一个handler()时，就可以使用简写形式
        -->
        <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changeWeather">切换天气</button>
            <hr/>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。
            
            const vm = new Vue({
                el:'#root',
                data:{
                    isHot:true,
                },
                computed:{
                    info(){
                        return this.isHot ? '炎热' : '凉爽';
                    }
                },
                methods:{
                    changeWeather(){
                        this.isHot = !this.isHot;
                    }
                },
                watch:{
                    //正常写法
                    /* isHot:{
                        //immediate:true, //初始化时让handler调用一下
                        //deep:true, //深度监视
                        handler(newValue,oldValue){
                            console.log('info属性被修改了'+newValue,oldValue);
                        }
                    },  */
                    //简写（当监视的属性配置项中不需要immediate和deep，只需要一个handler()时，就可以使用简写形式）
                    /* isHot(newValue,oldValue){
                        console.log('isHots属性被修改了',newValue,oldValue);
                    } */
                }
            })
            
            //vm.$watch监视属性正常写法
            /* vm.$watch('isHot',{
                immediate:true,
                deep:true,
                handler(newValue,oldValue){
                    console.log('info属性被修改了'+newValue,oldValue);
                }
            }) */

            //vm.$watch监视属性简写
            vm.$watch('isHot',function(newValue,oldValue){
                console.log('info属性被修改了'+newValue,oldValue);
            })

        </script>
        
    </body>
</html>